<template>
  <div class="badge-wrap" :class="badgeWrapCss">
    <span class="badge-name">{{ name }}</span>
    <span class="badge-content" :style="contStyle">{{ text }}</span>
  </div>
</template>

<script>
export default {
  props: ["name", "text", "color"],
  computed: {
    contStyle() {
      let obj = {};
      let colors = {
        red: "#df6155",
        green: "#53cc2f",
      };
      if (this.color) {
        obj["background-color"] = colors[this.color] || this.color;
      }
      return obj;
    },
    badgeWrapCss() {
      let obj = {};
      return obj;
    },
  },
};
</script>

<style lang="less">
.badge-wrap {
  font-size: 12px;
  line-height: 14px;
  border-radius: 4px;
  display: inline-block;
  margin: 2px 4px;
  overflow: hidden;
  color: #fff;
  span {
    display: inline-block;
    padding: 2px 6px;
    &:first-child {
      padding-left: 8px;
    }
    &:last-child {
      padding-right: 8px;
    }
  }
  .badge-name {
    background-color: #5c5c5c;
  }
}
</style>
